<template>
  <view class="statistic">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <view class="statistic__header">
      <view class="statistic__header-title">累计收益(元)</view>
      <view class="statistic__header-money">{{ benefitData.totolIncome }}</view>
    </view>
    <benefitCharts></benefitCharts>
  </view>
</template>

<script>
import benefitCharts from './components/benefit-charts.vue';

export default {
  components: {
    benefitCharts,
  },
  data() {
    return {
      benefitData: {},
      time: {},
    };
  },
  mounted() {
    this.time = this.traversalTime(new Date().getTime());
    this.getIncomeStat();
  },
  methods: {
    getIncomeStat() {
      this.$zx.user_api.incomeStat().then((data) => {
        console.log('incomeStat----->34', JSON.stringify(data));
        this.benefitData = data;
      });
    },
    traversalTime(timestamp) {
      //timestamp(时间戳)是整数，否则要parseInt转换
      let time = new Date(timestamp);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      return (
        y +
        '-' +
        this.addTimes(m) +
        '-' +
        this.addTimes(d) +
        ' ' +
        this.addTimes(h) +
        ':' +
        this.addTimes(mm) +
        ':' +
        this.addTimes(s)
      );
    },
    addTimes(m) {
      return m < 10 ? '0' + m : m;
    },
  },
};
</script>

<style scoped lang="scss">
.statistic {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 10rpx;

  &__title {
    font-weight: bold;
    margin-left: 20rpx;
  }

  &__tip {
    font-size: 11px;
    margin-left: 20rpx;
  }

  &__header {
    background-image: url(/static/image/benefit/img_trade_query_bg.png);
    background-size: 100% 100%;
    color: white;
    text-align: center;
    height: 244rpx;
    padding: 20rpx 30rpx;
  }

  &__header-title {
    margin-top: 30rpx;
  }

  &__header-money {
    margin-top: 30rpx;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40rpx;
  }

  &__item {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }
}
</style>
